<template>
  <div>
    <!-- <Header /> -->
    <div class="swiper">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item, index) in swiperImg" :key="index">
          <img :src="item.imgUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="content pd150 df">
      <div class="left cont_box">
        <div class="l_header df_bet">
          <div class="title">法律法规</div>
          <div class="more" @click="() => $router.push('/law')">更多...</div>
        </div>
        <div class="list df">
          <div v-for="(item, index) in leftList" :key="index">
            <span @click="() => $router.push(`/details/${item.id}`)">
              {{ item.title }}
            </span>
          </div>
        </div>
      </div>
      <div class="center cont_box">
        <div class="l_header df_bet">
          <div class="title">政策文件</div>
          <div class="more" @click="() => $router.push('/policy')">更多...</div>
        </div>
        <div class="list df">
          <div v-for="(item, index) in centerList" :key="index">
            <span @click="() => $router.push(`/details/${item.id}`)">
              {{ item.title }}
            </span>
          </div>
        </div>
      </div>
<!--      <div class="right cont_box">-->
<!--        <div class="l_header df_bet">-->
<!--          <div class="title">最新动态</div>-->
<!--          <div class="more">更多...</div>-->
<!--        </div>-->
<!--        <div class="list df">-->
<!--          <div v-for="(item, index) in rightList" :key="index">-->
<!--            <span @click="() => $router.push(`/details/${item.id}`)">-->
<!--              {{ item.title }}-->
<!--            </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <!-- <Footer /> -->
  </div>
</template>
<script>
import { api } from "@/plugins/api/index";
import request from "@/plugins/request";
import Footer from "@/components/footer";
export default {
  components: {
    Footer,
    // Header
  },
  data() {
    return {
      input: "",
      navList: [],
      swiperImg: [{}, {}, {}],
      leftList: [],
      centerList: [],
      rightList: [],
    };
  },
  mounted() {
    const { carousel } = api;
    request(carousel, {}).then((res) => {
      this.swiperImg = res;
    });
    //id为法律法规的cid
    this.getTableBz(2);
    this.getTableBz(3);
    // this.getNewList()

  },
  methods: {
    getTableBz(id) {
      let params = {
        currentPage: 1,
        pageSize: 10,
        menu_id: id,
      };
      const { pageList } = api;
      request(pageList, params, "get").then((res) => {
        if (res && id === 2) {
          this.leftList = res.items;
        } else if (res && id === 3) {
          this.centerList = res.items;
        }
      });
    },
    // getNewList() {
    //   const { newList } = api;
    //   request(newList, {}, "get").then((res) => {
    //     this.rightList = res;
    //   });
    // },
  },
};
</script>
<style lang="scss" scpoed>
@import "~/assets/css/main.scss";
.service {
  .swiper {
    .el-carousel__container {
      height: 500px;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: rem(16);
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
  .content {
    .cont_box {
      width: 50%;
      margin: rem(10) rem(10);
      .l_header {
        border-bottom: 2px solid #337ab7;
        margin: rem(10) rem(10) rem(5);
        padding-bottom: rem(5);
      }
      .title {
        font-weight: 600;
        color: #337ab7;
        font-size: rem(18);
      }
      .more {
        font-size: rem(14);
        color: #4281b9;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
      .list {
        background-color: #f6f9fc;
        flex-direction: column;
        padding: 0 rem(10) rem(7);
        font-size: rem(16);
        max-height: 300px;
        min-height: 300px;
        overflow: auto;
        div {
          display: flex;
          align-items: center;
          padding: rem(2) 0;
          display: -webkit-box;
          /* -webkit-box-orient: vertical; */
          /*! autoprefixer: ignore next  */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 1;
          overflow: hidden;
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
    .right {
      flex: 1;
      background-color: #f6f9fc;
      font-size: rem(14);
    }
  }
}
</style>
